<template>
    <view class="container">
        <tui-list-view>
            <!-- 循环渲染列表 -->
            <tui-list-cell v-for="(item, index) in infoList" :key="index" arrow @click="editField(index)">
                <span :class="item.icon" style="padding-right: 8px;"></span>
                {{ item.label }}
                <span style="position: absolute;right: 30px;">{{ item.value }}</span>
            </tui-list-cell>
        </tui-list-view>

        <!-- 通用选择器 -->
        <tui-picker v-if="show" :show="show" :pickerData="currentItems" @hide="closePicker" @change="onPickerChange" />

        <!-- 二级联动选择器 -->
        <tui-picker :show="show__2" :layer="2" :pickerData="items__2" :params="1" @hide="hide" @change="change" />

        <!-- 保存按钮 -->
		<!-- 底部固定保存按钮 -->
		<view class="footer">
		    <button class="save-button" @tap="saveSelection">保存</button>
		</view>
<!--        <view class="save-button" @click="saveSelection">
            保存
        </view> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                selectRow: {},
                // 列表数据
                infoList: [
                    {
                        label: "年龄",
                        enLabel: "age",
                        icon: "iconfont icon-chushengnianyue",
                        value: "未填写",
                        type: "range",
                        options: this.generateAgeOptions()
                    },
                    {
                        label: "月收入",
                        enLabel: "monthlyIncome",
                        icon: "iconfont icon-shouru",
                        value: "未填写",
                        type: "range",
                        options: this.generateIncomeOptions()
                    },
                    {
                        label: "学历",
                        enLabel: "education",
                        icon: "iconfont icon-xueli",
                        value: "未填写",
                        type: "single",
                        options: [
                            { text: "初中",value: "1" },
                            { text: "高中",value: "2" },
                            { text: "本科",value: "3" },
                            { text: "硕士",value: "4" },
                            { text: "博士",value: "5" }
                        ]
                    },
                    {
                        label: "居住地",
                        enLabel: "residence",
                        icon: "iconfont icon-juzhudizhi",
                        value: "未填写",
                        type: "linkedPicker",
                        options: this.generateResidenceOptions()
                        // options: [
                        //     {
                        //         text: '广东省',
                        //         value: '100',
                        //         children: [
                        //             {
                        //                 text: '广州市',
                        //                 value: '10001'
                        //             },
                        //             {
                        //                 text: '深圳市',
                        //                 value: '10002'
                        //             }
                        //         ]
                        //     },
                        //     {
                        //         text: '安徽省',
                        //         value: '200',
                        //         children: [
                        //             {
                        //                 text: '合肥市',
                        //                 value: '20001'
                        //             },
                        //             {
                        //                 text: '安庆市',
                        //                 value: '20002'
                        //             }
                        //         ]
                        //     }
                        // ]
                    },
                    {
                        label: "家乡",
                        enLabel: "hometown",
                        icon: "iconfont icon-a-jiaxiang1",
                        value: "未填写",
                        type: "single",
                        options: [
                            { text: "北京",value: "1" },
                            { text: "上海",value: "2" },
                            { text: "广州",value: "3" },
                            { text: "深圳",value: "4" }
                        ]
                    },
                    {
                        label: "职业",
                        enLabel: "profession",
                        icon: "iconfont icon-zhiye",
                        value: "未填写",
                        type: "single",
                        options: [
                            { text: "医生",value: "1" },
                            { text: "教师",value: "2" },
                            { text: "程序员",value: "3" },
                            { text: "设计师",value: "4" }
                        ]
                    },
                    {
                        label: "婚姻状况",
                        enLabel: "maritalStatus",
                        icon: "iconfont icon-hunyinjiating",
                        value: "未填写",
                        type: "single",
                        options: [
                            { text: "未婚",value: "1" },
                            { text: "已婚",value: "2" },
                            { text: "离异",value: "3" }
                        ]
                    },
                    {
                        label: "期望结婚时间",
                        enLabel: "expectedMarriageTime",
                        icon: "iconfont icon-riqi1",
                        value: "未填写",
                        type: "single",
                        options: [
                            { text: "一年内",value: "1" },
                            { text: "两年内",value: "2" },
                            { text: "不确定",value: "3" }
                        ]
                    },
                    {
                        label: "身高",
                        enLabel: "height",
                        icon: "iconfont icon-shengao",
                        value: "未填写",
                        type: "range",
                        options: this.generateHeightOptions()
                    },
                    {
                        label: "体重",
                        enLabel: "weight",
                        icon: "iconfont icon-tizhong",
                        value: "未填写",
                        type: "range",
                        options: this.generateWeightOptions()
                    },
                    {
                        label: "有无子女",
                        enLabel: "childrenStatus",
                        icon: "iconfont icon-smiling",
                        value: "未填写",
                        type: "single",
                        options: [
                            { text: "无",value: "1" },
                            { text: "有",value: "2" }
                        ]
                    },
                    {
                        label: "购房情况",
                        enLabel: "houseOwnership",
                        icon: "iconfont icon-goufangruhu",
                        value: "未填写",
                        type: "single",
                        options: [
                            { text: "无房",value: "1" },
                            { text: "有房无贷",value: "2" },
                            { text: "有房有贷",value: "3" }
                        ]
                    },
                    {
                        label: "购车情况",
                        enLabel: "carOwnership",
                        icon: "iconfont icon-gouche",
                        value: "未填写",
                        type: "single",
                        options: [
                            { text: "无车",value: "1" },
                            { text: "有车",value: "2" }
                        ]
                    },
                    {
                        label: "是否喝酒",
                        enLabel: "drinkingHabit",
                        icon: "iconfont icon-hejiu",
                        value: "未填写",
                        type: "single",
                        options: [
                            { text: "不喝酒",value: "1" },
                            { text: "偶尔喝",value: "2" },
                            { text: "经常喝",value: "3" }
                        ]
                    },
                    {
                        label: "是否吸烟",
                        enLabel: "smokingHabit",
                        icon: "iconfont icon-a-023_xiyanqu",
                        value: "未填写",
                        type: "single",
                        options: [
                            { text: "不吸烟",value: "1" },
                            { text: "偶尔吸",value: "2" },
                            { text: "经常吸",value: "3" }
                        ]
                    }
                ],
                show: false,
                show__2: false,
                currentItems: [],
                currentIndex: null,
                pickerType: "single",
                rangeValues: { min: null,max: null },
                minAge: null, // 保存最小年龄
                maxAge: null,  // 保存最大年龄
                selectRow: {}, // 保存所有选择数据
                items__2: []
            };
        },
        methods: {
            // 生成年龄选项
            generateAgeOptions() {
                const options = [];
                for (let i = 18; i <= 45; i += 5) {
                    const min = i;
                    const max = i + 4 > 45 ? 45 : i + 4;
                    options.push({ text: `${min}-${max}`,value: `${min}-${max}` });
                }
                return options;
            },
            // 生成收入选项
            generateIncomeOptions() {
                const options = [];
                for (let i = 3000; i <= 20000; i += 5000) {
                    const min = i;
                    const max = i + 4999 > 20000 ? '20000以上' : i + 4999;
                    options.push({ text: `${min}-${max}`,value: `${min}-${max}` });
                }
                return options;
            },
            // 生成居住地选项
            generateResidenceOptions() {
                const provinceCities = {
                    '北京': ['北京市'],
                    '上海': ['上海市'],
                    '天津': ['天津市'],
                    '重庆': ['重庆市'],
                    '河北': ['石家庄市','唐山市','秦皇岛市','邯郸市','邢台市','保定市','张家口市','承德市','沧州市','廊坊市','衡水市'],
                    '山西': ['太原市','大同市','阳泉市','长治市','晋城市','朔州市','晋中市','运城市','忻州市','临汾市','吕梁市'],
                    '内蒙古': ['呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市','兴安盟','锡林郭勒盟','阿拉善盟'],
                    '辽宁': ['沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市','朝阳市','葫芦岛市'],
                    '吉林': ['长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边朝鲜族自治州'],
                    '黑龙江': ['哈尔滨市','齐齐哈尔市','鸡西市','鹤岗市','双鸭山市','大庆市','伊春市','佳木斯市','七台河市','牡丹江市','黑河市','绥化市','大兴安岭地区'],
                    '江苏': ['南京市','无锡市','徐州市','常州市','苏州市','南通市','连云港市','淮安市','盐城市','扬州市','镇江市','泰州市','宿迁市'],
                    '浙江': ['杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市'],
                    '安徽': ['合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市','宿州市','六安市','亳州市','池州市','宣城市'],
                    '福建': ['福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市'],
                    '江西': ['南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市'],
                    '山东': ['济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市'],
                    '河南': ['郑州市','开封市','洛阳市','平顶山市','安阳市','鹤壁市','新乡市','焦作市','濮阳市','许昌市','漯河市','三门峡市','南阳市','商丘市','信阳市','周口市','驻马店市','济源市'],
                    '湖北': ['武汉市','黄石市','十堰市','宜昌市','襄阳市','鄂州市','荆门市','孝感市','荆州市','黄冈市','咸宁市','随州市','恩施土家族苗族自治州','仙桃市','潜江市','天门市','神农架林区'],
                    '湖南': ['长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市','湘西土家族苗族自治州'],
                    '广东': ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'],
                    '广西': ['南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市'],
                    '海南': ['海口市','三亚市','三沙市','儋州市','五指山市','琼海市','文昌市','万宁市','东方市','定安县','屯昌县','澄迈县','临高县','白沙黎族自治县','昌江黎族自治县','乐东黎族自治县','陵水黎族自治县','保亭黎族苗族自治县','琼中黎族苗族自治县'],
                    '四川': ['成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市','阿坝藏族羌族自治州','甘孜藏族自治州','凉山彝族自治州'],
                    '贵州': ['贵阳市','六盘水市','遵义市','安顺市','毕节市','铜仁市','黔西南布依族苗族自治州','黔东南苗族侗族自治州','黔南布依族苗族自治州'],
                    '云南': ['昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市','楚雄彝族自治州','红河哈尼族彝族自治州','文山壮族苗族自治州','西双版纳傣族自治州','大理白族自治州','德宏傣族景颇族自治州','怒江傈僳族自治州','迪庆藏族自治州'],
                    '西藏': ['拉萨市','日喀则市','昌都市','林芝市','山南市','那曲市','阿里地区'],
                    '陕西': ['西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市'],
                    '甘肃': ['兰州市','嘉峪关市','金昌市','白银市','天水市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市','临夏回族自治州','甘南藏族自治州'],
                    '青海': ['西宁市','海东市','海北藏族自治州','黄南藏族自治州','海南藏族自治州','果洛藏族自治州','玉树藏族自治州','海西蒙古族藏族自治州'],
                    '宁夏': ['银川市','石嘴山市','吴忠市','固原市','中卫市'],
                    '新疆': ['乌鲁木齐市','克拉玛依市','吐鲁番市','哈密市','昌吉回族自治州','博尔塔拉蒙古自治州','巴音郭楞蒙古自治州','阿克苏地区','克孜勒苏柯尔克孜自治州','喀什地区','和田地区','伊犁哈萨克自治州','塔城地区','阿勒泰地区','石河子市','阿拉尔市','图木舒克市','五家渠市','铁门关市']
                };
                const options = [];
                for (let province in provinceCities) {
                    const cities = provinceCities[province].map(city => ({ text: city,value: city }));
                    options.push({ text: province,value: province,children: cities });
                }
                return options;
            },
            // 生成身高选项
            generateHeightOptions() {
                const options = [];
                for (let i = 140; i <= 180; i += 10) {
                    const min = i;
                    const max = i + 9 > 180 ? '180以上' : i + 9;
                    options.push({ text: `${min}-${max}`,value: `${min}-${max}` });
                }
                return options;
            },
            // 生成体重选项
            generateWeightOptions() {
                const options = [];
                for (let i = 80; i <= 160; i += 20) {
                    const min = i;
                    const max = i + 19 > 160 ? '160以上' : i + 19;
                    options.push({ text: `${min}-${max}`,value: `${min}-${max}` });
                }
                return options;
            },
            // 编辑字段
            editField(index) {
                this.currentIndex = index;
                const field = this.infoList[index];
                if (field.enLabel === 'residence') {
                    this.items__2 = field.options;
                    this.show__2 = true;
                } else {
                    if (field.type === 'linkedPicker') {
                        this.items__2 = field.options;
                        this.show__2 = true;
                    } else {
                        this.currentItems = field.options;
                        this.pickerType = field.type;
                        this.show = true;
                    }
                }
            },
            // 选择器回调
            onPickerChange(e) {
                if (this.pickerType === 'range') {
                    const [min,max] = e.text.split("-");
                    this.rangeValues = { min,max };
                    if (this.infoList[this.currentIndex].enLabel === 'age') {
                        this.minAge = parseInt(min); // 保存最小年龄
                        this.maxAge = parseInt(max); // 保存最大年龄
                        this.selectRow['minAge'] = this.minAge;
                        this.selectRow['maxAge'] = this.maxAge;
                    } else if (this.infoList[this.currentIndex].enLabel === 'monthlyIncome') {
                        this.selectRow['minIncome'] = parseInt(min);
                        this.selectRow['maxIncome'] = max === '20000以上' ? max : parseInt(max);
                    } else if (this.infoList[this.currentIndex].enLabel === 'height') {
                        this.selectRow['minHeight'] = parseInt(min);
                        this.selectRow['maxHeight'] = max === '180以上' ? max : parseInt(max);
                    } else if (this.infoList[this.currentIndex].enLabel === 'weight') {
                        this.selectRow['minWeight'] = parseInt(min);
                        this.selectRow['maxWeight'] = max === '160以上' ? max : parseInt(max);
                    } else {
                        const key = this.infoList[this.currentIndex].enLabel;
                        this.selectRow[key] = `${min}-${max}`;
                    }
                    this.infoList[this.currentIndex].value = `${min}-${max}`;
                } else {
                    this.infoList[this.currentIndex].value = e.text;
                    const key = this.infoList[this.currentIndex].enLabel;
                    this.selectRow[key] = e.text;
                }
                this.show = false;
            },
            // 二级联动选择器关闭
            hide() {
                this.show__2 = false;
            },
            // 调用二级联动选择器
            picker__2() {
                this.show__2 = true;
            },
            // 二级联动选择结果
            change(e) {
                console.log(e);
                const result = e.result;
                this.infoList[this.currentIndex].value = result;
                this.selectRow[this.infoList[this.currentIndex].enLabel] = result;
                this.show__2 = false;
            },
            // 关闭选择器
            closePicker() {
                this.show = false;
            },
            // 保存按钮的回调
            saveSelection() {
                // 将所有选择的数据保存到 selectRow 中
                this.infoList.forEach(item => {
                    if (item.type === 'range' && item.value !== '未填写') {
                        const [min,max] = item.value.split("-");
                        if (item.enLabel === 'age') {
                            this.selectRow['minAge'] = parseInt(min);
                            this.selectRow['maxAge'] = parseInt(max);
                        } else if (item.enLabel === 'monthlyIncome') {
                            this.selectRow['minIncome'] = parseInt(min);
                            this.selectRow['maxIncome'] = max === '20000以上' ? max : parseInt(max);
                        } else if (item.enLabel === 'height') {
                            this.selectRow['minHeight'] = parseInt(min);
                            this.selectRow['maxHeight'] = max === '180以上' ? max : parseInt(max);
                        } else if (item.enLabel === 'weight') {
                            this.selectRow['minWeight'] = parseInt(min);
                            this.selectRow['maxWeight'] = max === '160以上' ? max : parseInt(max);
                        } else {
                            const key = item.enLabel;
                            this.selectRow[key] = `${min}-${max}`;
                        }
                    } else if (item.value !== '未填写') {
                        const key = item.enLabel;
                        this.selectRow[key] = item.value;
                    }
                });
                console.log(this.selectRow);

                // 显示保存后的信息
                let message = "当前选择的信息：\n";
                for (let key in this.selectRow) {
                    message += `${key}: ${this.selectRow[key]}\n`;
                }
                uni.showModal({
                    title: '选择信息',
                    content: message,
                    showCancel: false
                });
            }
        }
    };
</script>

<style lang="scss">
    .container {
        background-color: #f7f7f7;
        height: 100vh;
        padding: 0;
        overflow: auto;
        padding-bottom: 80px;
        /* 为保存按钮留出位置 */
    }

	.footer {
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background-color: #fff;
	    box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
	    padding: 20rpx;
	}
	.save-button {
	    width: 100%;
	    height: 60rpx;
	    background-color: $uni-btn-color;
	    color: #fff;
	    font-size: 28rpx;
	    text-align: center;
	    border: none;
	    border-radius: 30rpx;
	}
</style>